<template>
  <view class="custom-modal">
    <u-modal :show="show" :confirmColor="confirmColor" v-bind="$attrs" @confirm="$emit('confirm', $event)" @cancel="$emit('update:showFlag', false)" @close="$emit('update:showFlag', false)">
      <view style="width: 100%">
        <view class="title">{{ title }}</view>
        <slot></slot>
      </view>
    </u-modal>
  </view>
</template>
<script lang="ts">
export default {
  inheritAttrs: false,
};
</script>
<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
  },
  confirmColor: {
    type: String,
    default: '#000',
  },
  showFlag: { type: Boolean, default: false }, // 双向绑定的数据,控制弹窗打开关闭
});
const show = ref<boolean>(false);

watch(
  () => props.showFlag,
  async (newVal, oldVal) => {
    show.value = newVal;
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.custom-modal {
  width: 100%;
  ::v-deep [class^='u-modal__content'] {
    padding: 24rpx !important
  }
  .title {
    padding: 24rpx 24rpx;
    color: #2e2f2e;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }
}
</style>
